<template>
  <div id="fireAlarmRecords">
    <ul>
      <!-- 展示三个 -->
      <!-- <li v-for="(item, index) in list" :key="index">
            <div class="title">
              <div class="name">设备名称:{{ item.tagName }}</div>
              <div class="time">设备编号:{{ timeTranslate(item.alarmTime) }}</div>
            </div>
            <div class="title">
              <div class="name">设备位置:{{ item.tagName }}</div>
              <div class="time">报警级别:{{ timeTranslate(item.alarmTime) }}</div>
            </div>
            <p class="pos">采集时间: {{ timeTranslate(item.alarmTime) }}</p>
          </li> -->
      <!-- 只展示一个 -->
      <li v-for="(item, index) in list" :key="index">
        <div class="title">
          <div class="name">设备名称:{{ item.tagName }}</div>
          <div class="time">设备编号:123412412</div>
        </div>
        <div class="cont">
          <div>设备位置:{{ item.tagName }}</div>
          <div>类型:报警</div>
        </div>
        <p class="pos">采集时间: {{ timeTranslate(item.alarmTime) }}</p>
      </li>
    </ul>
  </div>
</template>
<script scoped>
// import { realtimeAlarm } from '@/http/api'
export default {
  data() {
    return {
      currentPage:1,
      pageSize:5,
      total:0,
      name:'',
      list: [
        {
          tagName: "紧急报警#tag1",
          pos: "",
          alarmLevel: "",
          alarmType: "紧急报警",
          alarmDesc: "",
          alarmStatus: "报警",
          gisName: "",
          cameraName: "",
          alarmTime: "2023-08-04T10:33:19.3016469+08:00",
          solvePerson: "",
          solveTime: "1970-01-01T00:00:00",
          recoverTime: "1970-01-01T00:00:00",
          solveRes: "",
          ack: false,
          alarmValue: "True",
        },
        // {
        //   tagName: "紧急报警#tag1",
        //   pos: "",
        //   alarmLevel: "",
        //   alarmType: "紧急报警",
        //   alarmDesc: "",
        //   alarmStatus: "报警",
        //   gisName: "",
        //   cameraName: "",
        //   alarmTime: "2023-08-04T10:33:19.3016469+08:00",
        //   solvePerson: "",
        //   solveTime: "1970-01-01T00:00:00",
        //   recoverTime: "1970-01-01T00:00:00",
        //   solveRes: "",
        //   ack: false,
        //   alarmValue: "True",
        // },
        // {
        //   tagName: "紧急报警#tag1",
        //   pos: "",
        //   alarmLevel: "",
        //   alarmType: "紧急报警",
        //   alarmDesc: "",
        //   alarmStatus: "报警",
        //   gisName: "",
        //   cameraName: "",
        //   alarmTime: "2023-08-04T10:33:19.3016469+08:00",
        //   solvePerson: "",
        //   solveTime: "1970-01-01T00:00:00",
        //   recoverTime: "1970-01-01T00:00:00",
        //   solveRes: "",
        //   ack: false,
        //   alarmValue: "True",
        // }
      ],
    };
  },
  methods: {
    getDoorAlarm() {
      // setInterval(() => {
        let data = {
        token: "",
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        alarmLevel: '',
        alarmDesc: this.name,
        alarmType: '消防'
      }
      this.$axios({
        url: 'http://192.168.143.8:8087/hisalarm',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: this.$QS.stringify(data)
      }).then((res) => {
        console.log(res.data.rows, 'res');
        this.table = res.data.rows;
        this.total = res.data.count
      })
        .catch((err) => {
          console.log(err);
        });
      // }, 1000);
    },
    // 转换时间格式
    timeTranslate(val) {
      // 格式化时间2022-07-05T09:57:39.000Z 成 2018-08-07 00:00:00
      return this.dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },

    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 480;
      var ratioX = window.innerWidth / 370;

      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getDoorAlarm();
    },
  },
  mounted() {
    this.winSize();
    this.getDoorAlarm()
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 480;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  watch: {},
  computed: {},
  filters: {},
  components: {},
};
</script>
<style scoped lang="less">
#fireAlarmRecords {
  width: 990px;
  height: 480px;
  padding: 40px 30px;
  box-sizing: border-box;
  overflow: hidden;
}

ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

li {
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .cont {
    display: flex;
    justify-content: flex-start;
    div {
      width: 48%;
    }
  }
}

.title {
  display: flex;
  justify-content: flex-start;
  div {
    width: 48%;
  }
  font-size: 32px;
  font-weight: bold;
}

p {
  margin: 20px 0px 0;

  font-size: 32px;
  font-weight: bold;
}
</style>
